<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<div id="page-content">
    <div class="row">
        <div class="fixed-fluid">

            <div class="fixed-sm-200 fixed-md-250 pull-sm-left">
                <div class="panel">
                    <%--<div class="pad-all bord-btm">--%>
                        <%--<button id="btn_add_dict_user" class="btn btn-block btn-success"><i class="ti-plus"></i> 新增字典</button>--%>
                    <%--</div>--%>
                    <p class="pad-hor mar-top text-main text-bold">字典列表</p>
                    <div id="dict_user_list" class="list-group bord-no">

                    </div>
                </div>
            </div>

            <div class="fluid">
                <div id="dictitem_user_panel" class="panel">
                    <div class="panel-body">
                        <h1 id="title_dict_user_selected" class="page-header text-overflow pad-btm">正在加载...</h1>
                        <div class="form-inline">
                            <div class="row">
                                <div class="col-sm-12 table-toolbar-left">
                                    <button id="btn_add_dictitem_user" class="btn btn-default"><i class="ti-plus"></i> 添加字典项</button>
                                </div>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table id="dictitem_user_list" class="table table-striped">
                                <thead>
                                <tr>
                                    <th style="width:30%">字典项名称</th>
                                    <th style="width:20%">自定义名称</th>
                                    <th>自定义排序</th>
                                    <th style="width:30%">操作</th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<script id="templates_dict_user_list" type="text/x-jsrender">

    <a href="javascript:void(0);" key="{{:id}}" class="list-group-item">
        {{:name}}
    </a>

</script>

<script id="templates_dictitem_user_list" type="text/x-jsrender">
    <tr id="{{:id}}" sId="{{:sId}}" sortNo="{{:sortNo}}" ifSystem="{{:ifSystem}}" >
        <td class="inbox-data-from">
		    <p class="text-main">
		        {{if ifSystem == 1}}
		            {{if state=='Enable'}}
                        {{if sState=='' || sState=='Enable'}}
                            <i class="ti-check"></i>
                        {{else sState=='Disenable'}}
                            <i class="ti-close"></i>
                        {{/if}}
                    {{else state=='Disenable'}}
                        <i class="ti-close"></i>
                    {{/if}}
		        {{else}}
                    {{if state=='Enable'}}
                        <i class="ti-check"></i>
                    {{else state=='Disenable'}}
                        <i class="ti-close"></i>
                    {{/if}}
                {{/if}}
			    {{:name}}
			    {{if ifSystem == 1}}
			        <span class="label label-mint">系统设定</span>
			    {{/if}}
			     {{if ifKey == 1}}
			        <span class="label label-danger">关键项</span>
			    {{/if}}
			    {{if ifSelectable == 1}}
			        <span class="label label-warning">不可选</span>
			    {{/if}}
		    </p>
		    {{if description!=''}}
                <p>
                    【说明】{{:description}}
                </p>
            {{/if}}
        </td>
        <td>
            <div>
                {{if ifSystem == 1}}
                    {{:sName}}
                {{else}}
                    {{:name}}
                {{/if}}
            </div>
        </td>
        <td>
            <div>
                {{if ifSystem == 1}}
                    <span class="label label-default">不允许排序</span>
                {{else}}
                    <a href="javascript:void(0);" key="dictitem_action_up_{{:id}}" class="btn btn-default btn-sm" onclick="fn_dictitem_custom_sort_up('{{:id}}');"><i class="ti-arrow-up"></i></a>
                    <a href="javascript:void(0);" key="dictitem_action_down_{{:id}}" class="btn btn-default btn-sm" onclick="fn_dictitem_custom_sort_down('{{:id}}');"><i class="ti-arrow-down"></i></a>
                {{/if}}
            </div>
        </td>
        <td>
            <div>
                {{if ifSystem == 1}}
                    <a href="javascript:void(0);" key="dictitem_action_custom_name_{{:id}}" class="btn btn-default btn-sm" onclick="fn_dictitem_custom_name('{{:id}}', '{{:sName?sName:name}}');"><i class="fa fa-lg fa-edit"></i>自定义名称</a>
                    {{if ifKey == 1}}
                        <span class="label label-waning">关键字典项不允许禁用</span>
                    {{else}}
                        {{if state=='Enable'}}
                            {{if sState=='' || sState=='Enable'}}
                                <a href="javascript:void(0);" key="dictitem_action_custom_disabled_{{:id}}" class="btn btn-warning btn-sm" onclick="fn_dictitem_custom_method('Disenable', '{{:id}}');"><i class="fa fa-lg fa-ban"></i> 禁用</a>
                            {{else sState=='Disenable'}}
                                <a href="javascript:void(0);" key="dictitem_action_custom_enable_{{:id}}" class="btn btn-success btn-sm" onclick="fn_dictitem_custom_method('Enable', '{{:id}}');"><i class="fa fa-lg fa-check-circle-o"></i> 启用</a>
                            {{/if}}
                        {{else state='Disenable'}}
                            <span class="label label-danger">字典项已被禁用</span>
                        {{/if}}
                    {{/if}}
                {{else}}
                    <a href="javascript:void(0);" key="dictitem_action_edit_{{:id}}" class="btn btn-default btn-sm" onclick="fn_dictitem_user_edit('{{:id}}');"><i class="fa fa-lg fa-edit"></i>编辑</a>
                    {{if state=='Enable'}}
                        <a href="javascript:void(0);" key="dictitem_action_disabled_{{:id}}" class="btn btn-warning btn-sm" onclick="fn_dictitem_user_method('Disenable', '{{:id}}');"><i class="fa fa-lg fa-ban"></i> 禁用</a>
                    {{else state=='Disenable'}}
                        <a href="javascript:void(0);" key="dictitem_action_enable_{{:id}}" class="btn btn-success btn-sm" onclick="fn_dictitem_user_method('Enable', '{{:id}}');"><i class="fa fa-lg fa-check-circle-o"></i> 启用</a>
                    {{/if}}
                {{/if}}
            </div>
        </td>
    </tr>
</script>

<script type="text/javascript">

    // 当前选中系统字典ID
    var current_dictId='';
    fn_dict_user_title('系统字典');

    $(function(){

        // 加载数据
        fn_dict_user_list_load();

    });

    function fn_dict_user_list_load() {
        var $templates =  $.templates('#templates_dict_user_list');
        var $container = $('#dict_user_list');
        var url = '<%=path%>/main/dict_user/list';
        __ajax_get(url, null, function(data) {
            if (data.state == 1) {
                var entity = data.data;

                // 初始化模板
                if (entity) {
                    // 初始化模板
                    var html  = $templates.render(entity);
                    $container.html(html);
                } else {
                    $container.html('');
                }

                // 点击事件
                $('#dict_user_list > a').click(function() {
                    var dictId = $(this).attr('key');
                    fn_dict_click(dictId);
                    return false;
                });

                if (current_dictId) {
                    fn_dict_click(current_dictId);
                } else {
                    // 默认选中第一个字典
                    var $first_dict_a = $('#dict_user_list > a:first');
                    if ($first_dict_a) {
                        var dictId = $first_dict_a.attr('key');
                        fn_dict_click(dictId);
                    }
                }

            }
        });
    }

    function fn_dict_click(dictId) {
        var $current_dict_a = $('#dict_user_list > a[key='+dictId+']');
        // 移除其他 li 选中状态
        $('#dict_user_list > a.active').removeClass('active');
        // 当前 li 选中状态
        $current_dict_a.addClass('active');
        // 设置标题
        fn_dict_user_title($current_dict_a.text(), dictId);
        // 初始化字典项列表
        fn_dictitem_user_list_load(dictId);
    }

    function fn_dictitem_user_list_load(dictId) {
        current_dictId = dictId;
        var $templates =  $.templates('#templates_dictitem_user_list');
        var $container = $('#dictitem_user_list > tbody');
        var url = '<%=path%>/main/dictitem_user/list?dictId=' + dictId;

        $('#dictitem_user_panel').panelOverlay({
            title: '加载中...'
        });

        __ajax_get(url, null, function (data) {
            if (data.state == 1) {
                var entity = data.data;

                // 初始化模板
                if (entity) {
                    var html  = $templates.render(entity);
                    $container.html(html);
                } else {
                    $container.html('');
                }
            }
        },{
            beforeSend: function(){
                $('#dictitem_user_panel').panelOverlay('show');
            },
            complete: function(){
                $('#dictitem_user_panel').panelOverlay('hide');
            }
        });
    }

    $('#dict_user_list_refresh').click(function () {

        // 刷新列表
        fn_dict_user_list_load();

        return false;
    });

    function fn_dict_user_title(title, id) {
        $('#title_dict_user_selected').html(title);
    }

    //新增字典item
    $('#btn_add_dictitem_user').click(function () {
        if (current_dictId) {
            __open_dialog_form('新建系统字典项', '<%=basePath%>/main/dictitem_user/create?dictId='+current_dictId, function (dialogRef) {
                var callback = function (data) {
                    if (data) {
                        dialogRef.close();

                        //刷新
                        fn_dictitem_user_list_load(current_dictId);
                    } else {
                        dialogRef.enableButtons();
                    }
                };

                if (fn_dictitem_user_input_save(callback) === false) {
                    dialogRef.enableButtons();
                }
            });
        } else {
            __toastr_error('请先选择系统字典');
        }
    });

    function fn_dictitem_user_edit(dictitemId) {
        if (dictitemId) {
            __open_dialog_form('编辑系统字典项', '<%=basePath%>/main/dictitem_user/update/'+dictitemId, function (dialogRef) {
                var callback = function (data) {
                    if (data) {
                        dialogRef.close();

                        //刷新
                        fn_dictitem_user_list_load(current_dictId);
                    } else {
                        dialogRef.enableButtons();
                    }
                };

                if (fn_dictitem_user_input_save(callback) === false) {
                    dialogRef.enableButtons();
                }
            });
        } else {
            __toastr_error('请先选择系统字典项');
        }
    }

    function fn_dictitem_user_method(method, id) {
        var message = '确定执行此操作么';
        if (method == 'Enable') {
            message = '确定启用么';
        } else if (method == 'Disenable') {
            message = '确定禁用么';
        }
        __confirm_dialog(null, message, function () {
            var url = '<%=path%>/main/dictitem_user/method/'+method+'/'+id;
            __ajax_post(url, null, function(data) {
                __toastr(data);
                if(data.state == 1) {
                    // 刷新
                    fn_dictitem_user_list_load(current_dictId);
                }
            });
        });
    }

    // 自定义名称
    function fn_dictitem_custom_name(dictitemId, name) {
        __confirm_dialog_input('自定义名称', '请输入自定义名称', name, function (dialogRef, inputValue) {
            if (inputValue) {
                dialogRef.close();

                fn_dictitem_setting_submit(dictitemId, inputValue, '');
            } else {
                dialogRef.enableButtons();

                __toastr_warning('请输入自定义名称');
            }
        });
    }

    // 自定义操作
    function fn_dictitem_custom_method(method, dictitemId) {
        var message = '确定执行此操作么';
        if (method == 'Enable') {
            message = '确定启用么';
        } else if (method == 'Disenable') {
            message = '确定禁用么';
        }
        __confirm_dialog(null, message, function () {
            fn_dictitem_setting_submit(dictitemId, '', method);
        });
    }

    function fn_dictitem_setting_submit(dictitemId, name, state){
        //ajax执行返回时触发
        var url = '<%=path %>/main/dictitem_user/setting_save';
        var data = { dictitemId: dictitemId, name: name, state: state};
        __ajax_post(url, data, function(data){
            __toastr(data);
            if(data.state == 1) {
                // 刷新
                fn_dictitem_user_list_load(current_dictId);
            }
        });
    }

    // 上移
    function fn_dictitem_custom_sort_up(dictitemId) {
        var $this = $('#dictitem_user_list > tbody > tr:has(a[key=dictitem_action_up_'+dictitemId+'])');
        if ($this.prev().length > 0){
            var $target = $this.prev();
            var targetId = $target.attr('id');
            var ids = new Array();
            if ($target.attr('ifSystem') == 1) {
                var $prev = $target.prev();
                ids.push($prev.attr('id'));
            }

            fn_dictitem_custom_sort('Up', dictitemId, targetId, ids);
        } else {
            __toastr_warning('无法继续上移');
        }
    }

    // 下移
    function fn_dictitem_custom_sort_down(dictitemId) {
        var $this = $('#dictitem_user_list > tbody > tr:has(a[key=dictitem_action_down_'+dictitemId+'])');
        if ($this.next().length > 0) {
            var $target = $this.next();
            var targetId = $target.attr('id');
            var ids = new Array();
            if ($target.attr('ifSystem') == 1) {
                var $next = $target.next();
                while ($next.length > 0 && $next.attr('ifSystem') == 0) {
                    ids.push($next.attr('id'));
                    $next = $next.next();
                }
            }

            fn_dictitem_custom_sort('Down', dictitemId, targetId, ids);
        } else {
            __toastr_warning('无法继续下移');
        }
    }

    // 排序
    function fn_dictitem_custom_sort(action, dictitemId, targetId, ids) {
        var url = "<%=path %>/main/dictitem_user/sort/"+action+"/"+ dictitemId;
        var data = {targetId: targetId, ids: ids};
        __ajax_post(url, data, function (data) {
            __toastr(data);
            if (data.state == 1) {
                // 刷新
                fn_dictitem_user_list_load(current_dictId);
            }
        });
    }

</script>